<template>
  <div class="main">
    <h2>
      {{goodsTitle}}
    </h2>
    <div class="main_box">
      <ul>
        <li v-for="(item,index) in goodsList" :key="item.goods.id+''" @click="open(item.goods.id)">
          <!--<div>
            {{item.goods.id}}
            {{item.goods.picUrl}}

          </div>-->
          <div class="list">
            <div class="image">
              <img v-lazy="item.goods.picUrl" alt="item.goods.name">
            </div>
            <p class="name">{{item.goods.name}}</p>
            <p class="counterPrice">原价：￥{{item.goods.counterPrice}}</p>
            <p class="Price">现价：￥{{item.goods.retailPrice}}</p>
          </div>
        </li>

      </ul>

    </div>
  </div>
</template>

<script>
  export default {
    name: "GoodsList",
    props: {
      goodsTitle: String,
      goodsList: Array
    },
    methods:{
      open(id) {
        this.$router.push({path:'goodsDetail', query: {id: id}})
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .main h2 {
    display: block;
    height: 1.3rem;
    background: white;
    font-size: 0.35rem;
    line-height: 1.3rem;
    padding-left: 0.3rem;
  }

  .main_box {
    /*height: 339px;*/
  }

  .list {
    height: 4.7rem;
    background: white;
    float: left;
    width: 50%;
    border-right: 1px solid #f4f4f4;
    border-top: 1px solid #f4f4f4;
  }

  .list span {
    display: block;
    color: red;
    padding-left: 0.5rem;
    padding-top: 0.1rem;
  }

  .main_box ul {
    overflow: hidden;
    margin-bottom: 1.5rem;
  }

  ul li {
    list-style: none;
  }

  .Price {
    font-size: 0.33rem;
    color: red;
    margin: auto;
    text-align: center;
    font-size: 0.3rem;
  }

  .counterPrice {
    text-decoration: line-through;
    font-size: 0.3rem;
    color: #999;
    margin: auto;
    text-align: center;
  }

  .name {
    width: 80%;
    height: 0.5rem;
    line-height: 0.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: auto;
    font-size: 0.29rem;
    font-weight: 800;
    text-align: center;
  }

  .nametwo {
    height: 0.48rem;
    font-size: 0.1rem;
    text-align: center;
  }

  .image {
    width: 100%;
    background: white;

    img {
      width: 2.5rem;
      height: 2.3rem;
      display: block;
      margin: auto;
      margin-top: .5rem;
      margin-bottom .2rem
    }
  }


</style>
